<template>
	<view :data-theme="theme">
		<scroll-view scroll-y="true" :style="{ 'padding-bottom':'20rpx' }" style="height: 100%; overflow: hidden;">
			<view class="cards" v-for="(item,index) in dataList">
				<view class="card-name" style="display: flex;font-size: 32rpx;">
					<text class="u-line-1" style="font-weight: bold;overflow: hidden;margin-right: 20rpx;">{{item.activityName}}</text>
					<view class="main_color" style="width: 110rpx;">活动中</view>
				</view>
				<view class="card_text">
					近{{item.clienteleCondition}}天未购买指定商品的客户可享受低价优惠
				</view>

				<view class="footer-button" style="margin-top: 20rpx;">
					<view class="last_button" style="display: flex;justify-content: space-between;font-size: 24rpx;">
						<view style="font-size: 28rpx;color: #999;">
							3天后截止
						</view>
						<button style="line-height: 50rpx;padding:0 30rpx;color: #fff;" class="bg_color"
							@click="showInfoModal(2,item)">去报名</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<u-empty v-if="!dataList.length" style="background-color: #f5f5f5;height: 100vh;" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>

	</view>
</template>

<script>
	import {
		getActivityListAPi
	} from "@/api/marketing.js";
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: '#ffffff',
				theme: app.globalData.theme,
				activityCategory: '',
				totalPage: 1,
				keyWord: '',
				dataList: [{
					name: '冻品尝鲜价04.14-04.30',
					type: 1, //1:活动中，2未开始，3已结束
					text: '近30天未购买指近30天未购买指定商品的客户可享受低价优惠',
					time: '2024.4.17-2024.4.30',
					productNum: 2,
				}, {
					name: '冻品尝鲜价04.14-04.30',
					type: 1, //1:活动中，2未开始，3已结束
					text: '近30天未购买指定商品的客户可享受低价优惠',
					time: '2024.4.17-2024.4.30',
					productNum: 2,
				}]
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.activityCategory = options.activityType;
			console.log('options:',options)
		},
		created() {
			this.getProductList();
		},
		methods: {
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				this.getProductList(true);
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}
				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},

			//-------------------------------api
			//加载 列表
			getProductList(isMerge) {
				let that = this;
				this.productLoading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getActivityListAPi(that.activityCategory).then(res => {
					let data = res.data;
					that.dataList = data.unregisteredActivityList;

					that.productLoading = false;
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					console.log("productHeadersApi error", err)
				});
			},
			
			/** 
			 去报名活动*/
			showInfoModal(ele,item){
				console.log('item,',item)
				this.goPage(`/pages/marketing/activeRegistration/index?id=${item.id}`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss">
	.main_color {
		@include main_color(theme);
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.cards {
		flex: 0 0 440rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 30rpx;

		.card-name {
			justify-content: space-between;
		}

		.card_text {
			// display: -webkit-box; //（兼容性）
			// -webkit-line-clamp:1;//（指定显示行数）
			// text-overflow: ellipsis;// (省略号）
			// overflow: hidden; //（多余部分隐藏）
			margin: 20rpx 0;
			font-size: 28rpx;
			line-height: 1.2;
			color: #000;
		}
	}
</style>